<template>
	<div>
		<div class="up">
			<div style="text-align: center;display: flex; width: 100%;">
				<div class="updateAdmin1">
					<div class="showAdminimg">
						<img :src="`http://127.0.0.1:80/api/public/showimg/${img}`" />
					</div>
					<div class="showAdminimg2">
						<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
							<el-menu-item index="1"><router-link
									to="/updateAdmin/updateAdminPwd">密码修改</router-link></el-menu-item>
							<el-menu-item index="1"><router-link
									to="/updateAdmin/updateAdminImg">头像修改</router-link></el-menu-item>
							<el-menu-item index="1"><router-link
									to="/updateAdmin/updateAdminAddr">地址修改</router-link></el-menu-item>
						</el-menu>
					</div>


				</div>
				<router-view style="margin-left: 5%; margin-top: 2%;"></router-view>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'updateAdmin',
		data() {
			return {
				img: '',
				activeIndex: '1',
				activeIndex2: '1'
			}
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			}
		},
		mounted() {
			this.img = window.localStorage.getItem('pic');
		}
	}
</script>

<style>
	.up {
		width: 60%;
		margin: 0 auto;
	}

	.updateAdmin1 {
		width: 30%;

		text-align: center;


	}

	.showAdminimg2 {
		padding-left: 25%;
	}



	.showAdminimg img {

		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
</style>